<template>
	<view>
		<view class="example-body">
			<uni-search-bar placeholder="请输入商品名称进行查询" @cancel="cancel" />
		</view>
		<uni-card
				v-for="item in goodsInfo"
				:key="item.id"
		    :title="item.info"
		    mode="style"
		    :is-shadow="true"
		    :thumbnail="item.image"
		    :note="item.piceCs"
				:stock="item.stock"
				@click="reduceStock(item)"
				:size="item.size"
		>
		商品名称: {{ item.name }}
		
		<view slot="add">
			<text class="ckxq">销售</text>
		</view>
		</uni-card>
		<uni-load-more :status="more" @onMore="onMore" :content-text="contentText" color="#007aff" />
		<prompt :visible.sync="promptVisible" :placeholder="placeholder1" @confirm="clickPromptConfirm" mainColor="#e74a39">
		  <!-- 这里放入slot内容-->
		</prompt>
	</view>
</template>

<script>
	import uniCard from "@/components/uni-card/uni-card"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import prompt from "@/components/prompt/index.vue"
	
	export default {
		components: { uniCard, uniLoadMore, uniSearchBar, prompt },
		data() {
			return {
				placeholder1:'',
				// 控制弹框输入框显示
				promptVisible: false,
				// 减少库存的id
				stockId: '',
				// more（loading前）、loading（loading中）、noMore（没有更多了）
				more: 'more',
				goodsInfo: [],
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多数据了！'
				},
				// 分页数据
				page: {
					pageIndex: 1,
					pageSize: 10
				}
			}
		},
		onLoad() {
			let params = {
				page: this.page.pageIndex,
				limit: this.page.pageSize,
			};
			this.init(params);
		},
		methods: {
			init(params) {
				params.classLevel = 1
				params.status = 1
				params.belongId = this.$store.getters.getUser.roleid
				this.more = 'loading'
				this.$api.getCommoditys(params).then((res) => {
					/* res.rows.forEach(item => {
						if (item.status == 0) {
							item.status = '下架'
						} else if (item.status == 1) {
							item.status = '上架'
						} else  {
							item.status = '删除'
						}
					}) */
					if (params.name != undefined) {
						this.goodsInfo = []
						this.goodsInfo = res.rows
						console.log(this.goodsInfo)
						this.more = 'noMore'
						return
					}
					if (!res.rows) {
						this.more = 'noMore'
						return
					}
					if (res.total <= 10) {
						this.more = 'noMore'
					} else {
						this.more = 'more'
					}
					if (this.page.pageIndex == 1) {
						this.goodsInfo = res.rows
					} else {
						this.goodsInfo = [ ...this.goodsInfo, ...res.rows]
					}
					
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			
			// 减少库存
			reduceStock(item) {
				this.stockId = item.id
				this.placeholder1 = '输入卖出的商品数量,商品为:'+item.name
				this.promptVisible = true
			},
			
			// 弹出框输入框确定
			clickPromptConfirm(val) {
				console.log(val)
				if (isNaN(val)) {
					uni.showToast({
						icon: 'none',
						title: "请输入正确的数字",
						duration: 500
					});
					return
				}
				let params = {
					id: this.stockId,
					stock: -val
				}
				this.$api.addCommodityInventory(params).then((res) => {
					if (res.success) {
						uni.showToast({
							icon: 'success',
							title: "减少成功",
							duration: 500
						});
						let params = {
							page: this.page.pageIndex,
							limit: this.page.pageSize,
						};
						this.init(params);
						this.promptVisible = false
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 1000
						});
					}
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			
			// 点击搜索
			cancel(res) {
				let params = {
					page: this.page.pageIndex,
					limit: this.page.pageSize,
				};
				params.name = res.value
				this.init(params);
			},
			
			// 查看更多
			onMore() {
				if (this.more === 'noMore') {
					return
				}
				this.page.pageIndex = this.page.pageIndex + 1
				let params = {
					page: this.page.pageIndex,
					limit: this.page.pageSize,
				};
				console.log(this.page.pageIndex)
				this.init(params);
			}
		}
	}
</script>

<style scoped>
	.ckxq {
		background: #007AFF;
		display: inline-block;
		width: 140upx;
		color: #fff;
		text-align: center;
		height: 40upx;
		border-radius: 100px;
	}
</style>
